<template>
  <div>
    <router-link 
      class="header-abs" 
      tag='div' 
      to='/'
      v-show='showAbs'
    >
      <div class='iconfont header-abs-back'>&#xe6a4;</div>
    </router-link>
    <div 
      class="header-fixed" 
      v-show='!showAbs'
      :style="opacitystyle"
    >
      <router-link to='/' >
        <div class='iconfont header-fixed-back'>&#xe6a4;</div>
      </router-link>
      景点详情 
      </div>
  </div>
</template>

<script>
export default {
  name:'detailheader',
  data(){
    return{
      lastdata:'',
      showAbs:true,
      opacitystyle:{
        opacity:0
      }
    }
  },
  methods:{
    handelscroll(){
      console.log('监听器触发的函数执行了')
      const top=document.documentElement.scrollTop
      if(top>60){
        let opacity=top/140//60-140做过渡效果
        opacity>1?1:opacity
        this.opacitystyle={
          opacity
        }
        this.showAbs=false
      }else{
        this.showAbs=true
      }
    }
  },
  activated(){//因为使用了kee-alive，所以只要页面被展示就会执行该钩子函数
    window.addEventListener('scroll',this.handelscroll)//全局事件，不移除时，在别的页面也会触发事件
  },
  deactivated(){//页面即将被替换成新的页面，组件的deactivated钩子会执行
    window.removeEventListener('scroll',this.handelscroll)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header-abs
    position:absolute
    left:.2rem
    top:.2rem 
    width:.8rem 
    height:.8rem 
    border-radius:0.4rem
    background-color:rgba(0,0,0,.8)
    text-align:center
    line-height:.8rem
    .header-abs-back
      color:#fff
      font-size:.4rem
  .header-fixed 
    z-index:2
    position:fixed
    top:0
    left:0
    right:0
    background:$bgcolor
    height:$headerheight
    line-height:$headerheight
    text-align:center
    color:#fff
    font-size:.32rem
    .header-fixed-back
      //此处不使用float:left是因为只有极少的空间可供浮动元素，那么这个元素会跳至下一行
      //会将文字挤到非中心位置，使用position后，脱离文档流悬浮起来，使其后面的文字可以位于中心
      position:absolute
      top:0
      left:0
      font-size:.5rem
      width:.64rem 
      text-align:center
      color:#fff
</style>
